<template>
  <div>
    <div class="filter-bar">
    <div class="fileter-item-container">
      <div @click="toggleFilter('model')">品牌 ▾</div>
      <!-- <mt-button type="default" size="small" @click.native="toggleFilter('model')">品牌</mt-button> -->
    </div>
    <div class="fileter-item-container">
      <div @click="toggleFilter('price')">价格 ▾</div>
      <!-- <mt-button type="default" size="small" @click.native="toggleFilter('price')">价格</mt-button> -->
    </div>
    <div class="fileter-item-container">
      <div @click="toggleFilter('type')">类型 ▾</div>
      <!-- <mt-button type="default" size="small" @click.native="toggleFilter('type')">类型</mt-button> -->
    </div>
  </div>
  <div class="option-container">
    <model-filter  :visible="filterVisible.model" :dataObj="modelList" @closeFilter="toggleFilter('model')" ></model-filter>
    <single-select :visible="filterVisible.price" :selectObj="priceObj" @closeFilter="toggleFilter('price')"></single-select>
    <type-filter :visible="filterVisible.type" :dataObj="typeList"  @closeFilter="toggleFilter('type')"></type-filter>
  </div>
  <filter-result></filter-result>
  </div>
  
</template>

<script>
import SingleSelect from '@/components/SingleSelect'
import ModelFilter from '@/components/ModelFilter'
import TypeFilter from '@/components/TypeFilter'
import FilterResult from '@/components/FilterResult'
  export default {
    name:'',
    components: { SingleSelect, ModelFilter, TypeFilter, FilterResult },
    props:[''],
    data () {
      return {
        priceVisible: false,
        modelVisible: false,
        typeVisible: false,
        filterVisible: {
          price: false,
          model: false,
          type: false
        },
        priceObj: {
          selected: 10,
          optionList: [
            {
              id: 0,
              name: '任意',
              value: null
            },
            {
              id: 1,
              name: '0-3万',
              value: 3,
            },
            {
              id: 2,
              name: '3-5万',
              value: 5,
            },
            {
              id: 3,
              name: '5-10万',
              value: 10,
            }
          ],
          
        },
        modelList: [
            {
              index: 'A',
              brandList: [
                {
                  title: '奥迪',
                  id: 1001
                }
              ]
            },
            {
              index: 'B',
              brandList: [
                 {
                  title: '宝马',
                  id: 2001
                },
                {
                  title: '奔驰',
                  id: 2002
                },
                 {
                  title: '别克',
                  id: 2003
                }
              ]
            }
          ],
          typeList: [
            {
              id: 1,
              title: '两厢车',
              class: 'ctwo'
            },
            {
              id: 2,
              title: '三厢车',
              class: 'cthree'
            },
            {
              id: 3,
              title: '跑车',
              class: 'crun'
            },
            {
              id: 4,
              title: 'SUV',
              class: 'csuv'
            },
            {
              id: 5,
              title: 'MPV',
              class: 'cmpv'
            }
          ]
      };
    },

    computed: {},

    methods: {
      toggleFilter(category) {
        console.log(category);
        
        let tmpStatus = this.filterVisible[category]
        this.filterVisible = {}
        this.filterVisible[category] = !tmpStatus
        
      }
    },

  }

</script>
<style lang='scss' scoped>
.filter-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: .1rem .2rem;
}
.fileter-item-container {
  font-size: .12rem;
  // & button {
  //   font-size: .12rem;
  // }
  // background: url(../static/icons.png) no-repeat;
  // background-size: 210px auto;
  // &::after {
  //   content: "^";
  //   display: inline-block;
  //   width: 6px;
  //   height: 3px;
  //   // vertical-align: middle;
  //   margin-left: 4px;
  //   // background-position: -145px -48px;
  // }
}
</style>